<template>
  <div class="home" style="display: flex; flex-direction: column; align-items: center; height: 100vh; box-sizing: border-box;">
    <p style="font-weight: 800; font-size: 2em; padding: 3vw 0;">雪沫甜品铺</p>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="甜品" name="first"></el-tab-pane>
      <el-tab-pane label="蛋糕" name="second"></el-tab-pane>
    </el-tabs>
    <el-tabs v-model="activeName2" @tab-click="handleClick2" v-if="activeName === 'second'">
      <el-tab-pane label="4寸" name="first"></el-tab-pane>
      <el-tab-pane label="6寸" name="second"></el-tab-pane>
      <el-tab-pane label="8寸" name="third"></el-tab-pane>
      <el-tab-pane label="8+6寸" name="fourth"></el-tab-pane>
    </el-tabs>
    <div style="flex: 1; overflow: auto; width: 100%;">
      <div class="goodItem" v-for="(item, index) in goodList" :key="index">
        <el-image 
          style="width: 25vw; margin-right: 5vw;"
          :src="item.picture" 
          :preview-src-list="[item.picture]">
        </el-image>
        <div class="info">
          <p style="font-weight: 500; font-size: 1em; margin-bottom: 2vw;">{{ item.name }}</p>
          <p style="font-size: 1em;">¥{{ item.price }}</p>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import tp1 from "../assets/tp/奥利奥盒子蛋糕（20元）.jpg";
import tp2 from "../assets/tp/奥利奥小盒子蛋糕（15元）.jpg";
import tp3 from "../assets/tp/杯子蛋糕（10-20元）.jpg";
import tp4 from "../assets/tp/草莓班戟（15元）.jpg";
import tp5 from "../assets/tp/花束纸杯蛋糕（40元）.jpg";
import tp6 from "../assets/tp/榴莲班戟（18元）.jpg";
import tp7 from "../assets/tp/芒果班戟（15元）.jpg";
import tp8 from "../assets/tp/芒果盒子蛋糕（20元）.jpg";
import tp9 from "../assets/tp/芒果小盒子蛋糕（15元）.jpg";
import tp10 from "../assets/tp/毛巾卷（20元）.jpg";
import tp11 from "../assets/tp/毛巾卷2（20元）.jpg";
import tp12 from "../assets/tp/奶油班戟蛋糕（6元）.jpg";
import tp13 from "../assets/tp/青提盒子蛋糕（20元）.jpg";
import tp14 from "../assets/tp/青提小盒子蛋糕（15元）.jpg";
import tp15 from "../assets/tp/水果盒子蛋糕（25元）.jpg";
import tp16 from "../assets/tp/水果盒子蛋糕2（25元）.jpg";
import tp17 from "../assets/tp/雪媚娘（12元）.jpg";
import tp18 from "../assets/tp/芋泥盒子蛋糕（20元）.jpg";
import tp19 from "../assets/tp/纸杯蛋糕（30元）.jpg";

import dg4_1 from "../assets/dg/4/草莓蛋糕4寸59元.jpg";
import dg4_2 from "../assets/dg/4/草莓奶油款4寸49元.jpg";
import dg4_3 from "../assets/dg/4/车厘子奶油蛋糕4寸59元.jpg";
import dg4_4 from "../assets/dg/4/榴莲蛋糕4层4寸89元.jpg";
import dg4_5 from "../assets/dg/4/巧克力奶油蛋糕4寸49元.jpg";
import dg4_6 from "../assets/dg/4/水果奶油蛋糕4寸49元.jpg";
import dg4_7 from "../assets/dg/4/水果奶油蛋糕4寸249元.jpg";
import dg4_8 from "../assets/dg/4/鲜水果裸蛋糕4寸59元.jpg";

import dg6_1 from "../assets/dg/6/奥利奥奶油蛋糕（老人款）89元.jpg";
import dg6_2 from "../assets/dg/6/车厘子莓果蛋糕109元.jpg";
import dg6_3 from "../assets/dg/6/车厘子莓果裸蛋糕109元.jpg";
import dg6_4 from "../assets/dg/6/库洛米奶油蛋糕89元.jpg";
import dg6_5 from "../assets/dg/6/水果奶油（百醇围边）99元.jpg";
import dg6_6 from "../assets/dg/6/水果奶油蛋糕（老人款）89元.jpg";
import dg6_7 from "../assets/dg/6/水果奶油蛋糕89元.jpg";

import dg8_1 from "../assets/dg/8/奥利奥奶油巧克力款139元.jpg";
import dg8_2 from "../assets/dg/8/水果奶油蛋糕（过寿款）139元.jpg";
import dg8_3 from "../assets/dg/8/水果奶油蛋糕139元.jpg";
import dg8_4 from "../assets/dg/8/水果奶油蛋糕2139元.jpg";
import dg8_5 from "../assets/dg/8/水果奶油蛋糕3139元.jpg";

import dg86_1 from "../assets/dg/8+6/花束蛋糕.jpg";

export default {
  name: 'HomeView',
  components: {
    
  },
  data() {
    return {
      goodList: [],
      activeName: "first",
      activeName2: "first",
      tpList: [
        {
          name: '奥利奥盒子蛋糕',
          price: '20',
          picture: tp1,
        },{
          name: '奥利奥小盒子蛋糕',
          price: '15',
          picture: tp2,
        },{
          name: '杯子蛋糕',
          price: '10-20',
          picture: tp3,
        },{
          name: '草莓班戟',
          price: '15',
          picture: tp4,
        },{
          name: '花束纸杯蛋糕',
          price: '40',
          picture: tp5,
        },{
          name: '榴莲班戟',
          price: '18',
          picture: tp6,
        },{
          name: '芒果班戟',
          price: '15',
          picture: tp7,
        },{
          name: '芒果盒子蛋糕',
          price: '20',
          picture: tp8,
        },{
          name: '芒果小盒子蛋糕',
          price: '15',
          picture: tp9,
        },{
          name: '毛巾卷',
          price: '20',
          picture: tp10,
        },{
          name: '毛巾卷2',
          price: '20',
          picture: tp11,
        },{
          name: '奶油班戟蛋糕',
          price: '6',
          picture: tp12,
        },{
          name: '青提盒子蛋糕',
          price: '20',
          picture: tp13,
        },{
          name: '青提小盒子蛋糕',
          price: '15',
          picture: tp14,
        },{
          name: '水果盒子蛋糕',
          price: '25',
          picture: tp15,
        },{
          name: '水果盒子蛋糕2',
          price: '25',
          picture: tp16,
        },{
          name: '雪媚娘',
          price: '12',
          picture: tp17,
        },{
          name: '芋泥盒子蛋糕',
          price: '20',
          picture: tp18,
        },{
          name: '纸杯蛋糕',
          price: '30',
          picture: tp19,
        }
      ],
      dg4List: [
        {
          name: '草莓蛋糕',
          price: '59',
          picture: dg4_1,
        },{
          name: '草莓奶油款',
          price: '49',
          picture: dg4_2,
        },{
          name: '车厘子奶油蛋糕',
          price: '59',
          picture: dg4_3,
        },{
          name: '榴莲蛋糕4层',
          price: '89',
          picture: dg4_4,
        },{
          name: '巧克力奶油蛋糕',
          price: '49',
          picture: dg4_5,
        },{
          name: '水果奶油蛋糕',
          price: '49',
          picture: dg4_6,
        },{
          name: '水果奶油蛋糕2',
          price: '49',
          picture: dg4_7,
        },{
          name: '鲜水果裸蛋糕',
          price: '59',
          picture: dg4_8,
        },
      ],
      dg6List: [
        {
          name: '奥利奥奶油蛋糕（老人款）',
          price: '89',
          picture: dg6_1,
        },{
          name: '车厘子莓果蛋糕',
          price: '109',
          picture: dg6_2,
        },{
          name: '车厘子莓果裸蛋糕',
          price: '109',
          picture: dg6_3,
        },{
          name: '库洛米奶油蛋糕',
          price: '89',
          picture: dg6_4,
        },{
          name: '水果奶油（百醇围边）',
          price: '99',
          picture: dg6_5,
        },{
          name: '水果奶油蛋糕（老人款）',
          price: '89',
          picture: dg6_6,
        },{
          name: '水果奶油蛋糕',
          price: '89',
          picture: dg6_7,
        },
      ],
      dg8List: [
        {
          name: '奥利奥奶油巧克力款',
          price: '139',
          picture: dg8_1,
        },{
          name: '水果奶油蛋糕（过寿款）',
          price: '139',
          picture: dg8_2,
        },{
          name: '水果奶油蛋糕',
          price: '139',
          picture: dg8_3,
        },{
          name: '水果奶油蛋糕2',
          price: '139',
          picture: dg8_4,
        },{
          name: '水果奶油蛋糕3',
          price: '139',
          picture: dg8_5,
        },
      ],
      dg86List: [
        {
          name: '花束蛋糕',
          price: '399',
          picture: dg86_1,
        }
      ]
    }
  },
  mounted() {
    // fs.readFile('../utils/goods.jsons', (err, data) => {
    //   console.log(data);
    // });
    this.goodList = this.tpList
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'first') {
        this.goodList = this.tpList
      }else {
        this.activeName2 = 'first'
        this.goodList = this.dg4List
      }
    },
    handleClick2(tab) {
      if (tab.name === 'first') {
        this.goodList = this.dg4List
      }else if (tab.name === 'second') {
        this.goodList = this.dg6List
      }else if (tab.name === 'third') {
        this.goodList = this.dg8List
      }else {
        this.goodList = this.dg86List
      }
    },
  }
}
</script>
<style lang="less">
.goodItem {
  flex: 1;
  background: #cddffd;
  width: 90%;
  padding: 5vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 5vw;
  border-radius: 10px;
  margin: 5vw auto;
  img {
    width: 25vw;
    margin-right: 5vw;
  }
  .info {
    text-align: center;
    flex: 1;
  }
}
.el-tabs__item {
  font-size: 1em !important;
} 
</style>